'use client';

import { useState } from 'react';
import { useParams } from 'next/navigation';
import Link from 'next/link';
import { useCrewWidgetConfigContext } from '../../context';
import { type FormState, createEmptyForm } from '../../types';
import CrewWidgetFormPanel from '../../_components/CrewWidgetFormPanel';
import CrewWidgetPreviewPanel from '../../_components/CrewWidgetPreviewPanel';
import { Separator } from '@/components/ui/separator';

export default function CrewWidgetEditPage()
{
	const { id } = useParams<{ id: string }>();
	const { items, loading } = useCrewWidgetConfigContext();
	const [form, setForm] = useState<FormState>(createEmptyForm());

	if (loading) {
		return <p className="studio-page__empty">준비 중...</p>;
	}

	const item = items.find(i => i.id === Number(id));

	if (!item) {
		return <p className="studio-page__empty">설정을 찾을 수 없습니다.</p>;
	}

	return (
		<>
			<div className="studio-page__title-row">
				<h1 className="studio-page__title">크루 위젯 수정</h1>
				<Link href="/studio/donation/crew/widget/list" className="text-sm text-muted-foreground hover:text-foreground">＜ 목록으로</Link>
			</div>
			<div className="pt-4 pb-4">
				<Separator orientation="horizontal" />
			</div>
			<div className="crew-widget-layout">
				<CrewWidgetPreviewPanel form={form} />
				<Separator orientation="vertical" />
				<CrewWidgetFormPanel editItem={item} form={form} onFormChange={setForm} />
			</div>
		</>
	);
}